﻿<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5
Version: 1.6.0
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<head>
    <meta charset="utf-8" />
    <title>Databoxes</title>

    <meta name="description" content="databoxes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!--Basic Styles-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/css/weather-icons.min.css" rel="stylesheet" />

    <!--Fonts-->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css">

    <!--Beyond styles-->
    <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" />
    <link href="assets/css/demo.min.css" rel="stylesheet" />
    <link href="assets/css/typicons.min.css" rel="stylesheet" />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link id="skin-link" href="" rel="stylesheet" type="text/css" />

    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="assets/js/skins.min.js"></script>
	
	<script src="assets/js/react/react.js"></script>
    <script src="assets/js/react/react-dom.js"></script>
    <script src="assets/js/react/browser.min.js"></script>
</head>
<!-- /Head -->
<!-- Body -->
<body>

	<div id="content">
	</div>
	
	<script type="text/babel">
	var NavbarBrand = React.createClass({
		render: function() {
			return (
			  <div className="navbar-header pull-left">
                    <a href="#" className="navbar-brand">
                        <small>
                            <img src="assets/img/logo.png" alt="" />
                        </small>
                    </a>
                </div>
			);
		 }
	});
	
	var SideBar = React.createClass({
		handleClick: function (e) {
			var b = $("#sidebar").hasClass("menu-compact");
			if (!$('#sidebar').is(':visible'))
            $("#sidebar").toggleClass("hide");
			$("#sidebar").toggleClass("menu-compact");
			$(".sidebar-collapse").toggleClass("active");
			b = $("#sidebar").hasClass("menu-compact");

			if ($(".sidebar-menu").closest("div").hasClass("slimScrollDiv")) {
				$(".sidebar-menu").slimScroll({ destroy: true });
				$(".sidebar-menu").attr('style', '');
			}
			if (b) {
				$(".open > .submenu").removeClass("open");
			} else {
				if ($('.page-sidebar').hasClass('sidebar-fixed')) {
					var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
					$('.sidebar-menu').slimscroll({
						height: 'auto',
						position: position,
						size: '3px',
						color: themeprimary
					});
				}
			}	
		},
		render: function() {
			return (
			  <div className="sidebar-collapse" id="sidebar-collapse" onClick={this.handleClick}>
                    <i className="collapse-icon fa fa-bars"></i>
                </div>
			);
		 }
	});
	
	var AccountItem = React.createClass({
		render: function() {
			return (
			  <li>
                  <a href="#">
                   <div className="clearfix">
					   <div className="notification-icon">
						<i className="fa fa-phone bg-themeprimary white"></i>
					   </div>
					   <div className="notification-body">
						<span className="title">{this.props.title}</span>
						<span className="description">{this.props.desc}</span>
					   </div>
					   <div className="notification-extra">
						 <i className="fa fa-clock-o themeprimary"></i>
						 <span className="description">{this.props.extra}</span>
						</div>
                   </div>
                  </a>
              </li>
			);
		 }
	});
	
	var MessageItem = React.createClass({
		render: function() {
			return (
			  <li>
				<a href="#">
                    <img src="assets/img/avatars/divyia.jpg" className="message-avatar" alt="Divyia Austin" />
                    <div className="message">
                        <span className="message-sender">
							{this.props.sender}
                        </span>
                        <span className="message-time">
							{this.props.time}
                        </span>
                        <span className="message-subject">
							{this.props.subject}
                        </span>
                        <span className="message-body">
							{this.props.body}
                        </span>
                    </div>
                </a>
              </li>
			);
		 }
	});
	
	var TaskItem = React.createClass({
		render: function() {
			return (
			  <li>
                <a href="#">
                    <div className="clearfix">
                        <span className="pull-left">{this.props.title}</span>
                        <span className="pull-right">{this.props.percent}</span>
                    </div>
                    <div className="progress progress-xs">
						<div style={{width:'65%'}} className="progress-bar"></div>
                    </div>
                </a>
              </li>
			);
		 }
	});
	
	var NavbarHeaderRight = React.createClass({
		chatClick: function (e) {
			$('.page-chatbar').toggleClass('open');
			$("#chat-link").toggleClass('open');
		},
		createCookie: function (e) {
			alert("hello");
			if (100) {
				var date = new Date();
				date.setTime(date.getTime() + (100 * 24 * 60 * 60 * 1000));
				var expires = "; expires=" + date.toGMTString();
			}
			else var expires = "";
			document.cookie = e + expires + "; path=/";
		},
		readCookie: function (e) {
			alert("hello");
			var nameEq = e + "=";
			var ca = document.cookie.split(';');
			for (var i = 0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) == ' ') c = c.substring(1, c.length);
				if (c.indexOf(nameEq) == 0) return c.substring(nameEq.length, c.length);
			}
			return null;
		},

		setCookiesForFixedSettings :function () {
			alert("hello");
			createCookie("navbar-fixed-top"+ "=" + $('#checkbox_fixednavbar').is(':checked'));
			createCookie("sidebar-fixed" + "=" + $('#checkbox_fixedsidebar').is(':checked'));
			createCookie("breadcrumbs-fixed"+"="+ $('#checkbox_fixedbreadcrumbs').is(':checked'));
			createCookie("page-header-fixed"+"="+ $('#checkbox_fixedheader').is(':checked'));

			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			if ($('#checkbox_fixedsidebar').is(':checked')) {
				if (!$('.page-sidebar').hasClass('menu-compact')) {
					//Slim Scrolling for Sidebar Menu in fix state
					$('.sidebar-menu').slimscroll({
						position: position,
						size: '3px',
						color: themeprimary,
						height: $(window).height() - 90,
					});
				}
			} else {
				if ($(".sidebar-menu").closest("div").hasClass("slimScrollDiv")) {
					$(".sidebar-menu").slimScroll({ destroy: true });
					$(".sidebar-menu").attr('style', '');
				}
			}
		},
		initiateSettings: function (e) {
			
			if (readCookie("navbar-fixed-top") != null) {
				if (readCookie("navbar-fixed-top") == "true") {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').addClass('navbar-fixed-top');
				}
			}

			if (readCookie("sidebar-fixed") != null) {
				if (readCookie("sidebar-fixed") == "true") {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').addClass('sidebar-fixed');

					if (!$(".page-sidebar").hasClass("menu-compact")) {
						var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
						$('.sidebar-menu').slimscroll({
							height: $(window).height() - 90,
							position: position,
							size: '3px',
							color: themeprimary
						});
					}
				}
			}
			if (readCookie("breadcrumbs-fixed") != null) {
				if (readCookie("breadcrumbs-fixed") == "true") {
					$('#checkbox_fixedbreadcrumbs').prop('checked', true);
					$('.page-breadcrumbs').addClass('breadcrumbs-fixed');
				}
			}
			if (readCookie("page-header-fixed") != null) {
				if (readCookie("page-header-fixed") == "true") {
					$('#checkbox_fixedheader').prop('checked', true);
					$('.page-header').addClass('page-header-fixed');
				}
			}

			$('#checkbox_fixednavbar').change(function () {
				$('.navbar').toggleClass('navbar-fixed-top');
				if (($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', false);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}

				if (($('#checkbox_fixedbreadcrumbs').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', false);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}

				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});

			$('#checkbox_fixedsidebar').change(function () {
				$('.page-sidebar').toggleClass('sidebar-fixed');
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				if (($('#checkbox_fixedbreadcrumbs').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', false);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}
				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});
			$('#checkbox_fixedbreadcrumbs').change(function () {
				$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				if (!($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});
			$('#checkbox_fixedheader').change(function () {
				$('.page-header').toggleClass('page-header-fixed');
				if (!($('#checkbox_fixedbreadcrumbs').is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', true);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}
				if (!($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				setCookiesForFixedSettings();
			});
		},
		settingsClick: function (e) {
			$('.navbar-account').toggleClass('setting-open');
		},
		componentDidMount: function() {
			this.initiateSettings();
		},
		render: function() {
			return (
			  <div className="navbar-header pull-right">
                    <div className="navbar-account">
                        <ul className="account-area">
                            <li>
                                <a className=" dropdown-toggle" data-toggle="dropdown" title="Notifications" href="#">
                                    <i className="icon fa fa-warning"></i>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-notifications">
                                    <AccountItem title="Skype meeting with Patty" desc="01:00 pm" extra="office" />
									<AccountItem title="Uncharted break" desc="03:30 pm - 05:15 pm" extra="" />
									<AccountItem title="Kate birthday party" desc="08:30 pm" extra="at home" />
									<AccountItem title="Dinner with friends" desc="10:30 pm" extra="" />
                                    <li className="dropdown-footer ">
                                        <span>
                                            Today, March 28
                                        </span>
                                        <span className="pull-right">
                                            10°c
                                            <i className="wi wi-cloudy"></i>
                                        </span>
                                    </li>
                                </ul>
                                
                            </li>
                            <li>
                                <a className="dropdown-toggle" data-toggle="dropdown" title="Mails" href="#">
                                    <i className="icon fa fa-envelope"></i>
                                    <span className="badge">3</span>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-messages">
                                    <MessageItem sender="Divyia Austin" time="2 minutes ago" subject="Here's the recipe for apple pie" body="to identify the sending application when the senders image is shown for the main icon" />
									<MessageItem sender="Bing.com" time="Yesterday" subject="Bing Newsletter: The January Issue‏" body="Discover new music just in time for the Grammy® Awards." />
									<MessageItem sender="Nicolas" time="Friday, September 22" subject="New 4K Cameras" body="The 4K revolution has come over the horizon and is reaching the general populous" />
                                </ul>
                                
                            </li>
                            <li>
                                <a className="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="#">
                                    <i className="icon fa fa-tasks"></i>
                                    <span className="badge">4</span>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
                                    <li className="dropdown-header bordered-darkorange">
                                        <i className="fa fa-tasks"></i>
                                        4 Tasks In Progress
                                    </li>
                                    <TaskItem title="Account Creation" percent="65%" />
									<TaskItem title="Profile Data" percent="35%" />
									<TaskItem title="Updating Resume" percent="75%" />
									<TaskItem title="Adding Contacts" percent="10%" />
                                    <li className="dropdown-footer">
                                        <a href="#">
                                            See All Tasks
                                        </a>
                                        <button className="btn btn-xs btn-default shiny darkorange icon-only pull-right"><i className="fa fa-check"></i></button>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a className="wave in" id="chat-link" title="Chat" href="#" onClick={this.chatClick}>
                                    <i className="icon glyphicon glyphicon-comment"></i>
                                </a>
                            </li>
                            <li>
                                <a className="login-area dropdown-toggle" data-toggle="dropdown">
                                    <div className="avatar" title="View your public profile">
                                        <img src="assets/img/avatars/adam-jansen.jpg" />
                                    </div>
                                    <section>
                                        <h2><span className="profile"><span>David Stevenson</span></span></h2>
                                    </section>
                                </a>
                                
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                    <li className="username"><a>David Stevenson</a></li>
                                    <li className="email"><a>David.Stevenson@live.com</a></li>
                                    
                                    <li>
                                        <div className="avatar-area">
                                            <img src="assets/img/avatars/adam-jansen.jpg" className="avatar" />
                                            <span className="caption">Change Photo</span>
                                        </div>
                                    </li>
                                    
                                    <li className="edit">
                                        <a href="profile.html" className="pull-left">Profile</a>
                                        <a href="#" className="pull-right">Setting</a>
                                    </li>
                                    
                                    <li className="theme-area">
                                        <ul className="colorpicker" id="skin-changer">
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#5DB2FF'}} rel="assets/css/skins/blue.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#2dc3e8'}} rel="assets/css/skins/azure.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#03B3B2'}} rel="assets/css/skins/teal.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#53a93f'}} rel="assets/css/skins/green.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#FF8F32'}} rel="assets/css/skins/orange.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#cc324b'}} rel="assets/css/skins/pink.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#AC193D'}} rel="assets/css/skins/darkred.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#8C0095'}} rel="assets/css/skins/purple.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#0072C6'}} rel="assets/css/skins/darkblue.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#585858'}} rel="assets/css/skins/gray.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#474544'}} rel="assets/css/skins/black.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#001940'}} rel="assets/css/skins/deepblue.min.css"></a></li>
                                        </ul>
                                    </li>
                                    
                                    <li className="dropdown-footer">
                                        <a href="login.html">
                                            Sign out
                                        </a>
                                    </li>
                                </ul>
                                
                            </li>
                            
                        </ul>
						<div className="setting">
                            <a id="btn-setting" title="Setting" href="#" onClick={this.settingsClick}>
                                <i className="icon glyphicon glyphicon-cog"></i>
                            </a>
                        </div>
						<div className="setting-container">
                            <label>
                                <input type="checkbox" id="checkbox_fixednavbar" />
                                <span className="text">Fixed Navbar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedsidebar" />
                                <span className="text">Fixed SideBar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedbreadcrumbs" />
                                <span className="text">Fixed BreadCrumbs</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedheader" />
                                <span className="text">Fixed Header</span>
                            </label>
                        </div>
                        
                    </div>
                </div>
			);
		 }
	});
	
	var Navbar = React.createClass({
		render: function() {
			return (
				<div className="navbar">
					<div className="navbar-inner">
						<div className="navbar-container">
							<NavbarBrand />
							<SideBar />
							<NavbarHeaderRight />
						</div>
					</div>
				</div>
			);
		 }
	});
	
	var MenuItemIcon = React.createClass({
		render: function() {
			return (
				<a href={this.props.href}>
					<i className="menu-icon fa fa-th"></i>
                    <span className="menu-text">{this.props.text}</span>
                </a>
			);
		 }
	});
	
	var MenuItem = React.createClass({
		render: function() {
			return (
				<a href={this.props.href}>
                    <span className="menu-text">{this.props.text}</span>
                </a>
			);
		 }
	});
	
	var ParentMenuIcon = React.createClass({
		render: function() {
			return (
				<a href="#" className="menu-dropdown">
                    <i className="menu-icon fa fa-desktop"></i>
                    <span className="menu-text">{this.props.text}</span>
                    <i className="menu-expand"></i>
                </a>
			);
		 }
	});
	
	var ParentMenu = React.createClass({
		render: function() {
			return (
				<a href="#" className="menu-dropdown">
                    <span className="menu-text">{this.props.text}</span>
                    <i className="menu-expand"></i>
                </a>
			);
		 }
	});
	
	var PageSidebar = React.createClass({
		bodyClickHandler: function (e) {
			var b = $("#sidebar").hasClass("menu-compact");
			var menuLink = $(e.target).closest("a");
			if (!menuLink || menuLink.length == 0)
				return;
			if (!menuLink.hasClass("menu-dropdown")) {
				if (b && menuLink.get(0).parentNode.parentNode == this) {
					var menuText = menuLink.find(".menu-text").get(0);
					if (e.target != menuText && !$.contains(menuText, e.target)) {
						return false;
					}
				}
				return;
			}
			var submenu = menuLink.next().get(0);
			if (!$(submenu).is(":visible")) {
				var c = $(submenu.parentNode).closest("ul");
				if (b && c.hasClass("sidebar-menu"))
					return;
				c.find("> .open > .submenu")
					.each(function () {
						if (this != submenu && !$(this.parentNode).hasClass("active"))
							$(this).slideUp(200).parent().removeClass("open");
					});
			}
			if (b && $(submenu.parentNode.parentNode).hasClass("sidebar-menu"))
				return false;
			$(submenu).slideToggle(200).parent().toggleClass("open");
			return false;
		},
		render: function() {
			return (
				<div className="page-sidebar" id="sidebar">
                
                <div className="sidebar-header-wrapper">
					<input type="text" className="searchinput" />
                    <i className="searchicon fa fa-search"></i>
                    <div className="searchhelper">Search Reports, Charts, Emails or Notifications</div>
                </div>
                
                <ul className="nav sidebar-menu" onClick={this.bodyClickHandler}>
                    
                    <li>
                        <MenuItemIcon href="index.html" text="Dashboard" />
                    </li>
                    
                    <li className="active">
                        <MenuItemIcon href="databoxes.html" text="Data Boxes" />
                    </li>
                    
                    <li>
                        <MenuItemIcon href="widgets.html" text="Widgets" />
                    </li>
                    
                    <li>
						<ParentMenuIcon text="Elements" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="elements.html" text="Basic Elements" />
                            </li>
                            <li>
								<ParentMenu text="Icons" />

                                <ul className="submenu">
                                    <li>
										<MenuItemIcon href="font-awesome.html" text="Font Awesome" />
                                    </li>
                                    <li>
										<MenuItemIcon href="glyph-icons.html" text="Glyph Icons" />
                                    </li>
                                    <li>
										<MenuItemIcon href="typicon.html" text="Typicons" />
                                    </li>
                                    <li>
										<MenuItemIcon href="weather-icons.html" text="Weather Icons" />
                                    </li>
                                </ul>
                            </li>
                            <li>
								<MenuItem href="tabs.html" text="Tabs & Accordions" />
                            </li>
                            <li>
								<MenuItem href="alerts.html" text="Alerts & Tooltips" />
                            </li>
                            <li>
								<MenuItem href="modals.html" text="Modals & Wells" />
                            </li>
                            <li>
								<MenuItem href="buttons.html" text="Buttons" />
                            </li>
                            <li>
								<MenuItem href="nestable-list.html" text="Nestable List" />
                            </li>
                            <li>
								<MenuItem href="treeview.html" text="Treeview" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Tables" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="tables-simple.html" text="Simple & Responsive" />
                            </li>
                            <li>
								<MenuItem href="tables-data.html" text="Data Tables" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Forms" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="form-layouts.html" text="Form Layouts" />
                            </li>

                            <li>
								<MenuItem href="form-inputs.html" text="Form Inputs" />
                            </li>

                            <li>
								<MenuItem href="form-pickers.html" text="Data Pickers" />
                            </li>
                            <li>
								<MenuItem href="form-wizard.html" text="Wizard" />
                            </li>
                            <li>
								<MenuItem href="form-validation.html" text="Validation" />
                            </li>
                            <li>
								<MenuItem href="form-editors.html" text="Editors" />
                            </li>
                            <li>
								<MenuItem href="form-inputmask.html" text="Input Mask" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Charts" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="flot.html" text="Flot Charts" />
                            </li>

                            <li>
								<MenuItem href="morris.html" text="Morris Charts" />
                            </li>
                            <li>
								<MenuItem href="sparkline.html" text="Sparkline Charts" />
                            </li>
                            <li>
								<MenuItem href="easypiecharts.html" text="Easy Pie Charts" />
                            </li>
                            <li>
								<MenuItem href="chartjs.html" text="ChartJS" />
                            </li>
                        </ul>
                    </li>

                    <li>
						<MenuItemIcon href="profile.html" text="Profile" />
                    </li>
	
                    <li>
						<ParentMenuIcon text="Mail" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="inbox.html" text="Inbox" />
                            </li>

                            <li>
								<MenuItem href="message-view.html" text="View Message" />
                            </li>
                            <li>
								<MenuItem href="message-compose.html" text="Compose Message" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<MenuItemIcon href="calendar.html" text="Calendar" />
                    </li>

                    <li>
						<ParentMenuIcon text="Pages" />
                        <ul className="submenu">
                            <li>
								<MenuItem href="timeline.html" text="Timeline" />
                            </li>
                            <li>
								<MenuItem href="pricing.html" text="Pricing Tables" />
                            </li>

                            <li>
								<MenuItem href="invoice.html" text="Invoice" />
                            </li>

                            <li>
								<MenuItem href="login.html" text="Login" />
                            </li>
                            <li>
								<MenuItem href="register.html" text="Register" />
                            </li>
                            <li>
								<MenuItem href="lock.html" text="Lock Screen" />
                            </li>
                            <li>
								<MenuItem href="typography.html" text="Typography" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="More Pages" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="error-404.html" text="Error 404" />
                            </li>

                            <li>
								<MenuItem href="error-500.html" text="Error 500" />
                            </li>
                            <li>
								<MenuItem href="blank.html" text="Blank Page" />
                            </li>
                            <li>
								<MenuItem href="grid.html" text="Grid" />
                            </li>
                            <li>
								<ParentMenu text="Multi Level Menu" />
                                
                                <ul className="submenu">
                                    <li>
										<MenuItemIcon href="#" text="Level 3" />
                                    </li>

                                    <li>
										<ParentMenuIcon text="Level 4" />

                                        <ul className="submenu">
                                            <li>
												<MenuItemIcon href="#" text="Some Item" />
                                            </li>

                                            <li>
												<MenuItemIcon href="#" text="Another Item" />
                                            </li>
                                        </ul>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                    </li>

                    <li>
						<ParentMenuIcon text="Right to Left" />
                        <ul className="submenu">
                            <li>
                                <a>
                                    <span className="menu-text">RTL</span>
                                    <label className="pull-right margin-top-10">
                                        <input id="rtl-changer" className="checkbox-slider slider-icon colored-primary" type="checkbox" />
                                        <span className="text"></span>
                                    </label>
                                </a>
                            </li>
                            <li>
								<MenuItem href="index-rtl-ar.html" text="Arabic Layout" />
                            </li>

                            <li>
								<MenuItem href="index-rtl-fa.html" text="Persian Layout" />
                            </li>

                        </ul>
                    </li>
                    <li>
						<MenuItemIcon href="versions.html" text="BeyondAdmin Versions" />
                    </li>
                </ul>
            </div>
			);
		 }
	});
	
	var Contact = React.createClass({
		handleClick: function(e) {
			$('.page-chatbar .chatbar-contacts').hide();
			$('.page-chatbar .chatbar-messages').show();
		},
		render: function() {
			return (
				<li className="contact" onClick={this.handleClick}>
                    <div className="contact-avatar">
                        <img src="assets/img/avatars/John-Smith.jpg" />
                    </div>
                    <div className="contact-info">
                        <div className="contact-name">{this.props.name}</div>
                        <div className="contact-status">
							<div className="online"></div>
                            <div className="status">{this.props.status}</div>
                        </div>
                        <div className="last-chat-time">
							{this.props.last}
                        </div>
                    </div>
                </li>
			);
		 }
	});
	
	var ContactList = React.createClass({
		componentDidMount: function() {
			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			var additionalHeight = 0;
			if ($(window).width() < 531)
				additionalHeight = 45;
			$('.chatbar-contacts .contacts-list').slimscroll({
				position: position,
				size: '4px',
				color: themeprimary,
				height: $(window).height() - (86 + additionalHeight),
			});
		},
		render: function() {
			return (
				<ul className="contacts-list">
					<Contact name="Divyia Philips" status="online" last="last week" />
					<Contact name="Adam Johnson" status="left 4 mins ago" last="today" />
					<Contact name="John Smith" status="online" last="1:57 am" />
					<Contact name="Osvaldus Valutis" status="online" last="today" />
					<Contact name="Javi Jimenez" status="online" last="today" />
					<Contact name="Stephanie Walter" status="online" last="yesterday" />
					<Contact name="Sergey Azovskiy" status="offline since oct 24" last="22 oct" />
					<Contact name="Lee Munroe" status="online" last="today" />
					<Contact name="Divyia Philips" status="online" last="last week" />
                </ul>
			);
		 }
	});
	
	var ContactSearch = React.createClass({
		render: function() {
			return (
				<div className="contacts-search">
                    <input type="text" className="searchinput" placeholder="Search Contacts" />
                    <i className="searchicon fa fa-search"></i>
                    <div className="searchhelper">Search Your Contacts and Chat History</div>
                </div>
			);
		 }
	});
	
	var ChatContact = React.createClass({
		render: function() {
			return (
				<div className="chatbar-contacts">
					<ContactSearch />
					<ContactList />
				</div>
			);
		 }
	});
	
	var ChatMessage = React.createClass({
		render: function() {
			return (
				<li className="message">
                    <div className="message-info">
                        <div className="bullet"></div>
                        <div className="contact-name">{this.props.sender}</div>
                        <div className="message-time">{this.props.time}</div>
                    </div>
                    <div className="message-body">
						{this.props.text}
                    </div>
                </li>
			);
		 }
	});
	
	var ChatReply = React.createClass({
		render: function() {
			return (
				<li className="message reply">
                    <div className="message-info">
                        <div className="bullet"></div>
                        <div className="contact-name">{this.props.sender}</div>
                        <div className="message-time">{this.props.time}</div>
                    </div>
                    <div className="message-body">
						{this.props.text}
                    </div>
                </li>
			);
		 }
	});
	
	var ChatList = React.createClass({
		componentDidMount: function() {
			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			var additionalHeight = 0;
			if ($(window).width() < 531)
				additionalHeight = 45;
			$('.chatbar-messages .messages-list').slimscroll({
				position: position,
				size: '4px',
				color: themeprimary,
				height: $(window).height() - (250 + additionalHeight),
			});
		},
		render: function() {
			return (
				<ul className="messages-list">
					<ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
                    <ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
                 </ul>
			);
		 }
	});
	
	var ChatSend = React.createClass({
		render: function() {
			return (
				<div className="send-message">
                    <span className="input-icon icon-right">
                        <textarea rows="4" className="form-control" placeholder="Type your message"></textarea>
                        <i className="fa fa-camera themeprimary"></i>
                    </span>
                </div>
			);
		 }
	});
	
	var ChatBarContact = React.createClass({
		handleClick: function(e) {
			$('.page-chatbar .chatbar-contacts').show();
			$('.page-chatbar .chatbar-messages').hide();
		},
		render: function() {
			return (
				<div className="messages-contact">
                    <div className="contact-avatar">
                        <img src="assets/img/avatars/divyia.jpg" />
                    </div>
                    <div className="contact-info">
                        <div className="contact-name">{this.props.name}</div>
                        <div className="contact-status">
                            <div className="online"></div>
                            <div className="status">{this.props.status}</div>
                        </div>
                        <div className="last-chat-time">
							{this.props.time}
                        </div>
                        <div className="back" onClick={this.handleClick}>
                            <i className="fa fa-arrow-circle-left"></i>
                        </div>
                    </div>
                </div>
			);
		 }
	});
	
	var ChatBarMessage = React.createClass({
		render: function() {
			return (
				<div className="chatbar-messages" style={{display: 'none'}}>
					<ChatBarContact name="Divyia Philips" status="online" time="a moment ago" />
					<ChatList />
					<ChatSend />
				</div>
			);
		 }
	});
	
	var ChatBar = React.createClass({
		render: function() {
			return (
				<div id="chatbar" className="page-chatbar">
					<ChatContact />
					<ChatBarMessage />
				</div>
			);
		 }
	});
	
	var FirstRow = React.createClass({
		componentDidMount: function() {
			var chartfirstcolor = "#57b5e3";
			var chartsecondcolor = "#f4b400";
			var chartthirdcolor = "#d73d32";
			var chartfourthcolor = "#8cc474";
			var chartfifthcolor = "#bc5679";
			var gridbordercolor = "#eee";

			var pieData = [
				{
					value: 30,
					color: chartfirstcolor
				},
				{
					value: 50,
					color: chartsecondcolor
				},
				{
					value: 100,
					color: chartfourthcolor
				}

			];
			new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);


			InitiateEasyPieChart.init();
			InitiateSparklineCharts.init();
			InitiateDonutChart.init();

			var data = [
				{ data: [[1, 50]], color: '#11a9cc' },
				{ data: [[1, 80]], color: '#ffce55' },
				{ data: [[1, 30]], color: '#e75b8d' }
			];
			var placeholder = $("#pie-chart-bandwidth");
			placeholder.unbind();

			$.plot(placeholder, data, {
				series: {
					pie: {
						innerRadius: 0.7,
						show: true,
						gradient: {
							radial: true,
							colors: [
								{ opacity: 1.0 },
								{ opacity: 1.0 },
								{ opacity: 1.0 }
							]
						}
					}
				}
			});


			var data = [
				{ data: [[1, 30]], color: '#ffce55' },
				{ data: [[1, 11]], color: '#e46f61' },
				{ data: [[1, 37]], color: '#ed4e2a' },
				{ data: [[1, 22]], color: '#fb6e52' }
			];
			var placeholder = $("#pie-chart-weather");
			placeholder.unbind();

			$.plot(placeholder, data, {
				series: {
					pie: {
						innerRadius: 0.80,
						show: true,
						gradient: {
							radial: true,
							colors: [
								{ opacity: 1.0 },
								{ opacity: 1.0 },
								{ opacity: 1.0 },
								{ opacity: 1.0 }
							]
						}
					}
				}
			});

			var d1_1 = [];
			for (var i = 1; i <= 7; i += 1)
				d1_1.push([i, parseInt(Math.random() * 50)]);

			var d1_2 = [];
			for (var i = 1; i <= 7; i += 1)
				d1_2.push([i, parseInt(Math.random() * 50)]);

			var d1_3 = [];
			for (var i = 1; i <= 7; i += 1)
				d1_3.push([i, parseInt(Math.random() * 50)]);

			var data1 = [
				{
					label: "Windows Phone",
					data: d1_1,
					bars: {
						show: true,
						order: 1,
						fillColor: { colors: [{ color: chartthirdcolor }, { color: chartthirdcolor }] }
					},
					color: chartthirdcolor
				},
				{
					label: "Android",
					data: d1_2,
					bars: {
						show: true,
						order: 2,
						fillColor: { colors: [{ color: chartsecondcolor }, { color: chartsecondcolor }] }
					},
					color: chartsecondcolor
				},
				{
					label: "IOS",
					data: d1_3,
					bars: {
						show: true,
						order: 3,
						fillColor: { colors: [{ color: chartfirstcolor }, { color: chartfirstcolor }] }
					},
					color: chartfirstcolor
				}
			];

			$.plot($("#bar-chart"), data1, {
				bars: {
					barWidth: 0.2,
					lineWidth: 1,
					borderWidth: 0,
					fillColor: { colors: [{ opacity: 0.6 }, { opacity: 1 }] }
				},
				xaxis: {
					ticks: [[1, 'Sun'], [2, 'Mon'], [3, 'Tues'], [4, 'Wed'], [5, 'Thu'], [6, 'Fri'], [7, 'Sat']],
					color: gridbordercolor
				},
				yaxis: {
					color: gridbordercolor
				},
				grid: {
					hoverable: true,
					clickable: false,
					borderWidth: 0,
					aboveData: false
				},
				legend: true,
				tooltip: true,
				tooltipOpts: {
					defaultTheme: false,
					content: "<b>%s</b> : <span>%x</span> : <span>%y</span>",
				}
			});


			var data = [],
				totalPoints = 300;

			function getRandomData() {

				if (data.length > 0)
					data = data.slice(1);



				while (data.length < totalPoints) {

					var prev = data.length > 0 ? data[data.length - 1] : 50,
						y = prev + Math.random() * 10 - 5;

					if (y < 0) {
						y = 0;
					} else if (y > 100) {
						y = 100;
					}

					data.push(y);
				}



				var res = [];
				for (var i = 0; i < data.length; ++i) {
					res.push([i, data[i]])
				}

				return res;
			}



			var updateInterval = 100;

			var plot = $.plot("#realtime-chart", [getRandomData()], {
				yaxis: {
					color: '#f3f3f3',
					min: 0,
					max: 100,
					tickFormatter: function (val, axis) {
						return "";
					}
				},
				xaxis: {
					color: '#f3f3f3',
					min: 0,
					max: 100,
					tickFormatter: function (val, axis) {
						return "";
					}
				},
				colors: ['#fff'],
				series: {
					lines: {
						lineWidth: 2,
						fill: false,
						fillColor: {
							colors: [{
								opacity: 0.5
							}, {
								opacity: 0
							}]
						},
						steps: false
					},
					shadowSize: 0
				},
				grid: {
					show: false,
					hoverable: true,
					clickable: false,
					borderWidth: 0,
					aboveData: false
				}
			});

			function update() {

				plot.setData([getRandomData()]);
				plot.draw();
				setTimeout(update, updateInterval);
			}
			update();
		},
		render: function() {
			return (
				<div className="row">
                    <div className="col-lg-12 col-sm-12 col-xs-12">
                        <div className="row">
                            <div className="col-lg-12 col-sm-12 col-xs-12">
                                <div className="well bordered-left bordered-themeprimary">
                                    <p>BeyondAdmin's Databoxes are meant to provide you a completely flexible  and very easy to customize tool to visualize data. You can create databoxes in multiple sizes and different styles. </p>
                                    <p>Basically there are two types of Databoxes: <strong>Horizontal</strong> and <strong>Vertical</strong>.</p>
                                    <p>You can user pre-defined styles to create infinite types of Databoxes to visualize data in your own fashion. These are just examples that i've made to show you how databoxes work. There is no limitation in your imagination and creativity.</p>
                                </div>
                            </div>
                        </div>
                        <div className="row">
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-graded">
									<div className="databox-left no-padding">
										<img src="assets/img/avatars/divyia.jpg" style={{width:'65px', height:'65px'}} />
									</div>
									<div className="databox-right padding-top-20">
										<div className="databox-stat yellow radius-bordered">
											<i className="stat-icon fa fa-envelope-o"></i>
										</div>
										<div className="databox-text darkgray">DIVYIA JONES</div>
										<div className="databox-text darkgray">Manager</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox">
									<div className="databox-left bg-white">
										<div className="databox-sparkline">
											<span data-sparkline="bar" data-height="40px" data-width="100%" data-barcolor="#57b5e3" data-negbarcolor="#a0d468" data-zerocolor="#d73d32"
												  data-barwidth="5px" data-barspacing="1px">
												5,6,7,2,0,-4,-2,4
											</span>
										</div>
									</div>
									<div className="databox-right bg-white bordered bordered-platinum">
										<span className="databox-number sky">2485</span>
										<div className="databox-text darkgray">PAGE VIEWS</div>
										<div className="databox-stat bg-palegreen radius-bordered">
											<div className="stat-text">8%</div>
											<i className="stat-icon fa fa-arrow-up"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded">
									<div className="databox-left bg-lightred">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="42" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="#f39e93"><span className="white font-90">42%</span></div>
										</div>
									</div>
									<div className="databox-right">
										<span className="databox-number lightred">322</span>
										<div className="databox-text darkgray">UNIQUE USERS</div>
										<div className="databox-stat bg-lightred radius-bordered">
											<div className="stat-text">4%</div>
											<i className="stat-icon fa fa-arrow-down"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-halved radius-bordered databox-shadowed">
									<div className="databox-left bg-whitesmoke">
										<div className="databox-sparkline">
											<span data-sparkline="compositeline" data-height="45px" data-width="100%"
												  data-linecolor="#57b5e3" data-secondlinecolor="#f4b400"
												  data-fillcolor="false" data-secondfillcolor="false"
												  data-highlightspotcolor="#a0d468" data-highlightlinecolor="#a0d468"
												  data-composite="4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7">
												8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
											</span>
										</div>
									</div>
									<div className="databox-right bg-sky padding-10">
										<span className="databox-title white">Users</span>
										<div className="databox-text white">Visit Statistics</div>

									</div>
								</div>
							</div>
                        </div>
						<div className="row">
							<div className="col-lg-3 col-md-3 col-sm-3 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded">
									<div className="databox-left bg-orange">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="50" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="#fa8872"><span className="white font-90">50%</span></div>
										</div>
									</div>
									<div className="databox-right">
										<span className="databox-number orange">14</span>
										<div className="databox-text darkgray">NEW TASKS</div>
										<div className="databox-stat orange radius-bordered">
											<i className="stat-icon icon-lg fa fa-tasks"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-md-3 col-sm-3 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded">
									<div className="databox-left bg-yellow">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="15" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="#fee29f"><span className="white font-90">15%</span></div>
										</div>
									</div>
									<div className="databox-right">
										<span className="databox-number yellow">1</span>
										<div className="databox-text darkgray">NEW MESSAGE</div>
										<div className="databox-stat yellow radius-bordered">
											<i className="stat-icon  icon-lg fa fa-envelope-o"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-md-3 col-sm-3 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded">
									<div className="databox-left bg-azure">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="76" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="#7fe2fa"><span className="white font-90">76%</span></div>
										</div>
									</div>
									<div className="databox-right">
										<span className="databox-number azure">98</span>
										<div className="databox-text darkgray">NEW USERS</div>
										<div className="databox-state bg-azure">
											<i className="fa fa-check"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-transparent">
									<div className="databox-left no-padding">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart block-center"
												 data-barcolor="#fb6e52" data-linecap="butt" data-percent="80" data-animate="500"
												 data-linewidth="2" data-size="65" data-trackcolor="#eee">
												<span className="databox-text darkgray">VISITS</span>
											</div>
										</div>
									</div>
									<div className="databox-right">
										<div className="databox-sparkline padding-5">
											<span data-sparkline="compositebar" data-height="50px" data-width="100%"
												  data-barcolor="#fff" data-negbarcolor="#f5f5f5" data-zerocolor="#d73d32"
												  data-barwidth="6px" data-barspacing="5px"
												  data-fillcolor="false" data-linecolor="#fb6e52" data-spotradius="3" data-linewidth="1.5"
												  data-spotcolor="#fff " data-minspotcolor="#fff " data-maxspotcolor="#fff"
												  data-highlightspotcolor="#fff" data-highlightlinecolor="#fff"
												  data-composite="4, 1, 5, 7, 6, 4, 8, 7, 2,4,2,1">
												6,4,0,1,4,6,2,4,4,8,2,4,1
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-blue">Large Databoxes</h6>
						<div className="row">
							<div className="col-lg-4 col-sm-6 col-xs-12">
								<div className="databox databox-lg radius-bordered databox-shadowed">
									<div className="databox-left bg-white">
										<div className="databox-sparkline">
											<span data-sparkline="bar" data-height="40px" data-width="100%" data-barwidth="7px" data-barspacing="3px" data-stackedbarcolor='["#11a9cc", "#ffce55"]'>
												2:2,2:3,3:2,1:3,3:3
											</span>
										</div>
									</div>
									<div className="databox-right bordered-thick bordered-sky bg-white">
										<span className="databox-number sky"><i className="fa fa-user"></i>2485</span>
										<div className="databox-text darkgray">NEW & RETURNING USERS</div>
										<div className="databox-stat bg-sky radius-bordered">
											<div className="stat-text">10 %</div>
											<i className="stat-icon fa fa-long-arrow-up"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-4 col-sm-6 col-xs-12">
								<div className="databox databox-lg radius-bordered databox-shadowed databox-graded">
									<div className="databox-left bg-palegreen">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="50" data-animate="500" data-linewidth="3" data-size="60" data-trackcolor="#aadc95"><span className="white font-90">50%</span></div>
										</div>
									</div>
									<div className="databox-right">
										<span className="databox-number green">206</span>
										<div className="databox-text darkgray">TRAFFIC USED (GB)</div>
										<div className="databox-stat bg-palegreen radius-bordered">
											<div className="stat-text">10%</div>
											<i className="stat-icon fa fa-arrow-up"></i>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-4 col-sm-6 col-xs-12">
								<div className="databox databox-halved databox-lg radius-bordered databox-shadowed">
									<div className="databox-left bg-white">
										<div className="databox-sparkline">
											<span data-sparkline="compositebar" data-height="40px" data-width="100%"
												  data-barcolor="#5db2ff" data-negbarcolor="#f4b400" data-zerocolor="#d73d32"
												  data-barwidth="5px" data-barspacing="4px"
												  data-fillcolor="false" data-linecolor="#e75b8d" data-spotradius="3" data-linewidth="2"
												  data-composite="4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7">
												8,4,0,1,4,6,2,4,4,8,10,7,10
											</span>
										</div>
									</div>
									<div className="databox-right bg-pink">
										<span className="databox-title white">Users</span>
										<div className="databox-text white">Visit Statistics</div>

									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-darkorange">Larger Databoxes</h6>
						<div className="row">
							<div className="col-lg-6 col-sm-6 col-xs-12">
								<div className="databox databox-xlg radius-bordered databox-shadowed">
									<div className="databox-left bg-snow">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#11a9cc " data-linecap="butt" data-percent="60" data-animate="500" data-linewidth="7" data-size="150" data-trackcolor="#ffce55">
												<span className="sky font-150"><i className="fa fa-envelope"></i> Mail</span>
											</div>
										</div>
									</div>
									<div className="databox-right no-padding bordered-thick bordered-whitesmoke">
										<div className="databox-row row-6 bg-orange padding-10">
											<div className="databox-sparkline">
												<span data-sparkline="line" data-height="65px" data-width="100%" data-fillcolor="false" data-linecolor="#fff"
													  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
													  data-highlightspotcolor="#fff" data-highlightlinecolor="#fff"
													  data-linewidth="3" data-spotradius="5">
													2,6,7,9,8,5,3,4,4,3,6,7
												</span>
											</div>
										</div>
										<div className="databox-row row-3 bg-yellow padding-10">
											<span className="databox-title pull-left no-margin"><i className="fa fa-envelope"></i> Inbox</span>
											<span className="databox-number pull-right no-margin">129</span>
										</div>
										<div className="databox-row row-3 bg-sky padding-10">
											<span className="databox-title pull-left"><i className="fa fa-mail-forward"></i> Sent</span>
											<span className="databox-number pull-right no-margin">32</span>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-6 col-sm-6 col-xs-12">
								<div className="databox databox-xlg radius-bordered databox-shadowed databox-graded">
									<div className="databox-left bg-pink">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="60" data-animate="500" data-linewidth="7" data-size="150" data-trackcolor="#f89cbd">
												<span className="white font-150"><i className="fa fa-bell"></i> Users</span>
											</div>
										</div>
									</div>
									<div className="databox-right bordered-thick bordered-warning">
										<div className="databox-row row-6 bordered-bottom bordered-platinum padding-10">
											<div className="databox-cell cell-6 no-padding">
												<span className="databox-title darkgray">Overview</span>
												<span className="databox-text darkgray">Your website statistics</span>
											</div>
											<div className="databox-cell cell-6 no-padding">

											</div>

										</div>
										<div className="databox-row row-3 bordered-bottom bordered-platinum">
											<span className="databox-text darkgray padding-10">RETURNING USERS</span>
											<div className="databox-stat bg-yellow radius-bordered">
												<div className="stat-text">12 %</div>
												<i className="stat-icon fa fa-arrow-down"></i>
											</div>
										</div>
										<div className="databox-row row-3">
											<span className="databox-text darkgray padding-10">NEW USERS</span>
											<div className="databox-stat bg-pink radius-bordered">
												<div className="stat-text">8 %</div>
												<i className="stat-icon fa fa-arrow-up"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div className="row">
							<div className="col-lg-6 col-sm-6 col-xs-12">
								<div className="databox databox-xlg radius-bordered databox-shadowed databox-graded databox-inverted">
									<div className="databox-left bg-orange no-padding">
										<div className="horizontal-space"></div>
										<div className="databox-stat bg-white radius-bordered">
											<div className="stat-text orange">8%</div>
											<i className="stat-icon fa fa-arrow-up orange"></i>
										</div>
										<div className="databox-stat stat-left radius-bordered">
											<div className="stat-text">Burndown</div>
										</div>
										<div className="databox-sparkline">
											<span data-sparkline="line" data-height="158px" data-width="100%" data-fillcolor="#fc8973" data-linecolor="#fff"
												  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
												  data-highlightspotcolor="#fff" data-highlightlinecolor="#fff"
												  data-linewidth="3" data-spotradius="0">
												2,6,7,9,8,5,3,4,4,3,6,7
											</span>
										</div>
									</div>
									<div className="databox-right bordered-thick bordered-white bg-whitesmoke">
										<div className="databox-row row-3 bordered-bottom bordered-platinum padding-10">
											<span className="databox-text darkgray pull-left no-margin">Messages</span>
											<span className="badge badge-default graded pull-right">1</span>
										</div>
										<div className="databox-row row-3 bordered-bottom bordered-platinum padding-10">
											<span className="databox-text darkgray pull-left no-margin">Tasks In Progress</span>
											<span className="badge badge-default graded pull-right">8</span>
										</div>
										<div className="databox-row row-3 bordered-bottom bordered-platinum padding-10">
											<span className="databox-text darkgray pull-left no-margin">Tasks Done</span>
											<span className="badge badge-default graded pull-right">7</span>
										</div>
										<div className="databox-row row-3 padding-10">
											<span className="databox-text darkgray pull-left no-margin">Backlogs</span>
											<span className="badge badge-default graded pull-right">2</span>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-6 col-sm-6 col-xs-12">
								<div className="databox databox-xlg radius-bordered databox-shadowed databox-graded">

									<div className="databox-left bg-ivory">
										<div className="databox-piechart padding-10">
											<div data-toggle="easypiechart" className="easyPieChart" data-barcolor="#2dc3e8 " data-linecap="butt"
												 data-percent="25" data-animate="500" data-linewidth="10" data-size="130" data-trackcolor="#fafafa">
												<span className="sky font-150"><i className="fa fa-cloud-download"></i> 25% </span>
											</div>
										</div>
									</div>
									<div className="databox-right bg-azure bordered-thick bordered-white no-padding">
										<div className="horizontal-space space-lg"></div>
										<div className="databox-stat radius-bordered">
											<div className="stat-text">Download/Upload</div>
										</div>
										<div className="databox-sparkline">
											<span data-sparkline="compositeline" data-height="153px" data-width="100%" data-linecolor="#fff" data-secondlinecolor="#f5f5f5"
												  data-fillcolor="rgb(92,211,240)" data-secondfillcolor="rgba(92,211,240,.10)"
												  data-spotradius="0"
												  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
												  data-highlightspotcolor="#fff" data-highlightlinecolor="#fff"
												  data-linewidth="2" data-secondlinewidth="2"
												  data-composite="5, 4, 1, 5, 3, 2, 1, 2">
												3,3,4,3,2,3,3,2
											</span>
										</div>
									</div>
								</div>

							</div>
						</div>
						<h6 className="row-title before-yellow">Largest Databoxes</h6>
						<div className="row">
							<div className="col-lg-12 col-sm-12 col-xs-12">
								<div className="databox databox-xxlg radius-bordered databox-shadowed databox-halved">
									<div className="databox-left bg-whitesmoke padding-top-10">
										<div className="databox-stat bg-orange radius-bordered">
											<div className="stat-text">24 %</div>
											<i className="stat-icon fa fa-long-arrow-down"></i>
										</div>
										<div className="databox-stat stat-left radius-bordered">
											<div className="stat-text darkgray">CPU USAGE</div>
										</div>
										<canvas id="pie" height="230" width="230"></canvas>
									</div>
									<div className="databox-right bordered-thick bordered-whitesmoke bg-blue no-padding">
										<div className="databox-stat bg-yellow radius-bordered">
											<div className="stat-text">10 %</div>
											<i className="stat-icon fa fa-long-arrow-up"></i>
										</div>
										<div className="databox-stat stat-left radius-bordered">
											<div className="stat-text white">CPU USAGE</div>
										</div>
										<div id="realtime-chart" className="chart chart-lg">

										</div>
									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-azure">Vertical Databoxes</h6>
						<div className="row">
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded databox-vertical">
									<div className="databox-top bg-blue">
										<div className="databox-icon">
											<i className="fa fa-clock-o"></i>
										</div>
									</div>
									<div className="databox-bottom text-align-center">
										<span className="databox-text">FRIDAY - 2014 16 MAY</span>
										<span className="databox-text">11:24 - AM</span>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-vertical">
									<div className="databox-top bg-orange no-padding">
										<div className="databox-row row-2"></div>
										<div className="databox-row row-10">
											<div className="databox-sparkline">
												<span data-sparkline="bar" data-height="42px" data-width="100%" data-barcolor="#e7573a" data-negbarcolor="#e7573a" data-zerocolor="#e7573a"
													  data-barwidth="7px" data-barspacing="3px">
													2,4,5,6,3,2,0,4,2,4,3,2,6,4,5,1,4,5,6,9,1
												</span>
											</div>
										</div>
									</div>
									<div className="databox-bottom no-padding bg-white">
										<div className="databox-row">
											<div className="databox-cell cell-6 text-align-center bordered-right bordered-platinum">
												<span className="databox-number lightcarbon">206</span>
												<span className="databox-text sonic-silver no-margin">FOLLOWERS</span>
											</div>
											<div className="databox-cell cell-6 text-align-center">
												<span className="databox-number lightcarbon">405</span>
												<span className="databox-text sonic-silver no-margin">FOLLOWING</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded databox-vertical">
									<div className="databox-top no-padding ">
										<div className="databox-row">
											<div className="databox-cell cell-6 text-align-center bg-sky">
												<span className="databox-number">13</span>
												<span className="databox-text">TASKS</span>
											</div>
											<div className="databox-cell cell-6 text-align-center bg-azure">
												<span className="databox-number">9</span>
												<span className="databox-text">BACKLOGS</span>
											</div>
										</div>
									</div>
									<div className="databox-bottom">
										<span className="databox-text">TASKS</span>
										<div className="progress progress-sm">
											<div className="progress-bar progress-bar-azure" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{width: '70%'}}>
												<span className="sr-only">
													20% Complete
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox radius-bordered databox-shadowed databox-graded databox-vertical">
									<div className="databox-top no-padding ">
										<div className="databox-row">
											<div className="databox-cell cell-6 text-align-center bg-orange">
												<span className="databox-number">9</span>
												<span className="databox-text">ORDERS</span>
											</div>
											<div className="databox-cell cell-6 text-align-center bg-darkorange">
												<span className="databox-number">3</span>
												<span className="databox-text">DELIVERED</span>
											</div>
										</div>
									</div>
									<div className="databox-bottom">
										<span className="databox-text">DELIVERY PERCENT</span>
										<div className="progress progress-sm">
											<div className="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{width:'30%'}}>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-orange">Large Vertical Databoxes</h6>
						<div className="row">
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-lg databox-inverted radius-bordered databox-shadowed databox-graded databox-vertical">
									<div className="databox-top bg-palegreen no-padding">
										<div className="horizontal-space space-lg"></div>
										<div className="databox-sparkline no-margin">
											<span data-sparkline="compositebar" data-height="82px" data-width="100%"
												  data-barcolor="#b0dc81"
												  data-barwidth="10px" data-barspacing="5px"
												  data-fillcolor="false" data-linecolor="#fff" data-spotradius="3" data-linewidth="2"
												  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#fff"
												  data-highlightspotcolor="#fff" data-highlightlinecolor="#fff"
												  data-composite="7, 6, 5, 7, 9, 10, 8, 7, 6, 6, 4, 7, 8">
												8,4,1,2,4,6,2,4,4,8,10,7,10
											</span>
										</div>
									</div>
									<div className="databox-bottom no-padding">
										<div className="databox-row">
											<div className="databox-cell cell-6 text-align-left">
												<span className="databox-text">Sales Total</span>
												<span className="databox-number">$23,657</span>
											</div>
											<div className="databox-cell cell-6 text-align-right">
												<span className="databox-text">September</span>
												<span className="databox-number font-70">$1,257</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-lg databox-inverted radius-bordered databox-shadowed databox-graded databox-vertical">
									<div className="databox-top no-padding">
										<img src="assets/img/temp1.png" alt="" style={{height:'100px', width:'100%'}} />
									</div>
									<div className="databox-bottom no-padding bordered-thick bordered-orange">
										<div className="databox-row">
											<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
												<span className="databox-number lightcarbon no-margin">510</span>
												<span className="databox-text sonic-silver  no-margin">Posts</span>
											</div>
											<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
												<span className="databox-number lightcarbon no-margin">908</span>
												<span className="databox-text sonic-silver no-margin">Followers</span>
											</div>
											<div className="databox-cell cell-4 no-padding text-align-center">
												<span className="databox-number lightcarbon no-margin">286</span>
												<span className="databox-text sonic-silver no-margin">Following</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-2 col-sm-6 col-xs-12">
								<div className="databox databox-lg databox-halved radius-bordered databox-shadowed databox-vertical">
									<div className="databox-top bg-darkorange no-padding">
										<div className="databox-icon">
											<i className="wi wi-cloudy-windy"></i>
										</div>
									</div>
									<div className="databox-bottom bg-white no-padding">
										<div className="databox-row text-align-center">
											<div className="databox-cell cell-6 bordered-right bordered-platinum padding-5">
												<span className="databox-number lightcarbon">14°</span>
												<span className="databox-header lightcarbon"><i className="wi wi-strong-wind"></i></span>


											</div>
											<div className="databox-cell cell-6 padding-5">
												<span className="databox-number lightcarbon">13°</span>
												<span className="databox-header lightcarbon"><i className="wi wi-rain"></i></span>

											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-2 col-sm-4 col-xs-6">
								<div className="databox databox-lg databox-vertical databox-inverted bg-white databox-shadowed">
									<div className="databox-top">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart block-center"
												 data-barcolor="#e75b8d" data-linecap="butt" data-percent="40" data-animate="500"
												 data-linewidth="8" data-size="100" data-trackcolor="#eee">
												<span className="white font-200"><i className="fa fa-tags pink"></i></span>
											</div>
										</div>
									</div>
									<div className="databox-bottom no-padding text-align-center">
										<span className="databox-number lightcarbon no-margin">11</span>
										<span className="databox-text lightcarbon no-margin">NEW TICKETS</span>

									</div>
								</div>
							</div>
							<div className="col-lg-2 col-sm-4 col-xs-6">
								<div className="databox databox-lg databox-vertical databox-inverted databox-graded">
									<div className="databox-top">
										<div className="databox-piechart">
											<div data-toggle="easypiechart" className="easyPieChart block-center"
												 data-barcolor="#11a9cc" data-linecap="butt" data-percent="80" data-animate="500"
												 data-linewidth="8" data-size="100" data-trackcolor="#eee">
												<span className="white font-200"><i className="fa fa-gift sky"></i></span>
											</div>
										</div>
									</div>
									<div className="databox-bottom no-padding text-align-center">
										<span className="databox-number lightcarbon no-margin">9</span>
										<span className="databox-text lightcarbon no-margin">NEW PRODUCTS</span>

									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-blueberry">Larger Vertical Databoxes</h6>
						<div className="row">
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-xlg radius-bordered databox-shadowed databox-vertical">
									<div className="databox-top bg-blue">
										<span className="databox-header">JANUARY 2014</span>
									</div>
									<div className="databox-bottom bg-white no-padding">
										<div id="donut-chart" style={{height:'150px'}}></div>
									</div>
								</div>
							</div>
							<div className="col-lg-4 col-sm-6 col-xs-12">
								<div className="databox databox-xlg databox-halved radius-bordered databox-shadowed databox-vertical">
									<div className="databox-top bg-white padding-10">
										<div className="col-lg-4 col-sm-4 col-xs-4">
											<img src="assets/img/avatars/Sergey-Azovskiy.jpg" style={{width:'75px', height:'75px'}} className="image-circular bordered-3 bordered-palegreen" />
										</div>
										<div className="col-lg-8 col-sm-8 col-xs-8 text-align-left padding-10">
											<span className="databox-header carbon no-margin">Martin James</span>
											<span className="databox-text lightcarbon no-margin"> Software Manager at Microsoft </span>
										</div>
									</div>
									<div className="databox-bottom bg-white no-padding">
										<div className="databox-row row-12">
											<div className="databox-row row-6 no-padding">
												<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
													<span className="databox-text sonic-silver  no-margin">Posts</span>
													<span className="databox-number lightcarbon no-margin">510</span>
												</div>
												<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
													<span className="databox-text sonic-silver no-margin">Followers</span>
													<span className="databox-number lightcarbon no-margin">908</span>
												</div>
												<div className="databox-cell cell-4 no-padding text-align-center">
													<span className="databox-text sonic-silver no-margin">Following</span>
													<span className="databox-number lightcarbon no-margin">286</span>
												</div>
											</div>
											<div className="databox-row row-6 padding-10">
												<button className="btn btn-palegreen btn-sm pull-right">FOLLOW</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-5 col-sm-6 col-xs-12">
								<div className="databox databox-xlg radius-bordered databox-shadowed databox-vertical">
									<div className="databox-top bg-white">
										<span className="databox-header orange">WEEKLY SALE STAT</span>
									</div>
									<div className="databox-bottom bg-white no-padding">
										<div className="databox-sparkline">
											<span data-sparkline="line" data-height="158px" data-width="100%" data-fillcolor="#ffce55" data-linecolor="#fb6e52"
												  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
												  data-highlightspotcolor="#fb6e52" data-highlightlinecolor="#fb6e52"
												  data-linewidth="3" data-spotradius="0">
												2,6,7,9,8,5,3,4,4,3,6,7
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-pink">Larger-er Vertical Databoxes</h6>
						<div className="row">
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-xxlg databox-inverted databox-vertical databox-shadowed databox-graded">
									<div className="databox-top padding-10">
										<div id="pie-chart-bandwidth" className="chart chart"></div>
										<div className="flot-donut-caption">
											<span className="databox-number lightcarbon no-margin">160GB</span>
											<span className="databox-text sonic-silver  no-margin">Total Usage</span>
										</div>
									</div>
									<div className="databox-bottom no-padding bg-white bordered bordered-platinum">
										<div className="databox-row row-12 no-padding">
											<div className="databox-cell cell-4 no-padding text-align-center bordered-bottom-5 bordered-sky">
												<span className="databox-title lightcarbon no-margin"><i className="fa fa-picture-o"></i></span>
												<span className="databox-text sonic-silver  no-margin">50GB</span>
											</div>
											<div className="databox-cell cell-4 no-padding text-align-center bordered-bottom-5 bordered-yellow">
												<span className="databox-title lightcarbon no-margin"><i className="fa fa-video-camera"></i></span>
												<span className="databox-text sonic-silver  no-margin">80GB</span>
											</div>
											<div className="databox-cell cell-4 no-padding text-align-center bordered-bottom-5 bordered-pink">
												<span className="databox-title lightcarbon no-margin"><i className="fa fa-music"></i></span>
												<span className="databox-text sonic-silver no-margin">30GB</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-6 col-sm-6 col-xs-12">
								<div className="databox databox-xxlg databox-vertical databox-inverted">
									<div className="databox-top bg-whitesmoke no-padding">
										<div className="databox-row row-2 bg-orange no-padding">
											<div className="databox-cell cell-1 text-align-center no-padding padding-top-5">
												<span className="databox-number white"><i className="fa fa-bar-chart-o no-margin"></i></span>
											</div>
											<div className="databox-cell cell-8 no-padding padding-top-5 text-align-left">
												<span className="databox-number white">PAGE VIEWS</span>
											</div>
											<div className="databox-cell cell-3 text-align-right padding-10">
												<span className="databox-text white">13 DECEMBER</span>
											</div>
										</div>
										<div className="databox-row row-4">
											<div className="databox-cell cell-6 no-padding padding-10 padding-left-20 text-align-left">
												<span className="databox-number orange no-margin">534,908</span>
												<span className="databox-text sky no-margin">OVERAL VIEWS</span>
											</div>
											<div className="databox-cell cell-2 no-padding padding-10 text-align-left">
												<span className="databox-number orange no-margin">4,129</span>
												<span className="databox-text darkgray no-margin">THIS WEEK</span>
											</div>
											<div className="databox-cell cell-2 no-padding padding-10 text-align-left">
												<span className="databox-number orange no-margin">329</span>
												<span className="databox-text darkgray no-margin">YESTERDAY</span>
											</div>
											<div className="databox-cell cell-2 no-padding padding-10 text-align-left">
												<span className="databox-number orange no-margin">104</span>
												<span className="databox-text darkgray no-margin">TODAY</span>
											</div>
										</div>
										<div className="databox-row row-6 no-padding">
											<div className="databox-sparkline">
												<span data-sparkline="line" data-height="126px" data-width="100%" data-fillcolor="#37c2e2" data-linecolor="#37c2e2"
													  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
													  data-highlightspotcolor="#f5f5f5 " data-highlightlinecolor="#f5f5f5"
													  data-linewidth="2" data-spotradius="0">
													5,7,6,5,9,4,3,7,2
												</span>
											</div>
										</div>
									</div>
									<div className="databox-bottom bg-sky no-padding">
										<div className="databox-cell cell-2 text-align-center no-padding padding-top-5">
											<span className="databox-header white">Mon</span>
										</div>
										<div className="databox-cell cell-2 text-align-center no-padding padding-top-5">
											<span className="databox-header white">Tues</span>
										</div>
										<div className="databox-cell cell-2 text-align-center no-padding padding-top-5">
											<span className="databox-header white">Wed</span>
										</div>
										<div className="databox-cell cell-2 text-align-center no-padding padding-top-5">
											<span className="databox-header white">Thu</span>
										</div>
										<div className="databox-cell cell-2 text-align-center no-padding padding-top-5">
											<span className="databox-header white">Fri</span>
										</div>
										<div className="databox-cell cell-2 text-align-center no-padding padding-top-5">
											<span className="databox-header white">Sat</span>
										</div>

									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-xxlg databox-inverted databox-vertical databox-shadowed databox-graded radius-bordered">
									<div className="databox-top bg-white ">
										<div className="databox-row row-1">
											<div className="databox-stat orange radius-bordered font-120">
												<i className="stat-icon wi wi-rain icon-xlg"></i>
											</div>
										</div>
										<div className="databox-row row-8">
											<div id="pie-chart-weather" className="chart" style={{height:'160px'}}>
											</div>
											<div className="flot-donut-caption">
												<span className="databox-number sonic-silver no-margin">2014</span>
												<span className="databox-text sonic-silver  no-margin">December</span>
											</div>
										</div>
										<div className="databox-row row-3 padding-10">
											<span className="databox-number darkorange no-margin">Weather</span>
											<span className="databox-text carbon no-margin">ALL SEASON</span>
										</div>
									</div>
									<div className="databox-bottom no-padding bg-white bordered bordered-platinum">
										<div className="databox-row row-12 no-padding">
											<div className="databox-cell cell-3 no-padding text-align-center bg-yellow">
												<span className="databox-number no-margin">30%</span>
												<span className="databox-text no-margin">Rain</span>
											</div>
											<div className="databox-cell cell-3 no-padding text-align-center bg-orange">
												<span className="databox-number no-margin">11%</span>
												<span className="databox-text no-margin">Wind</span>
											</div>
											<div className="databox-cell cell-3 no-padding text-align-center bg-darkorange">
												<span className="databox-number no-margin">37%</span>
												<span className="databox-text no-margin">Sunny</span>
											</div>
											<div className="databox-cell cell-3 no-padding text-align-center bg-danger">
												<span className="databox-number no-margin">22%</span>
												<span className="databox-text no-margin">Snow</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div className="row">
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-vertical databox-xxlg databox-halved radius-bordered databox-shadowed">
									<div className="databox-top no-padding bg-palegreen">
										<div className="databox-row row-5 text-align-left padding-10">
											<div className="databox-stat white bg-palegreen font-120">
												<i className="stat-icon fa fa-caret-up icon-xlg"></i>
											</div>
											<span className="databox-number no-margin">639.73</span>
											<span className="databox-text no-margin">-29 (4.2%)</span>
										</div>
										<div className="databox-row row-7">
											<div className="databox-sparkline no-margin">
												<span data-sparkline="compositebar" data-height="88px" data-width="100%"
													  data-barcolor="#bfe19a"
													  data-barwidth="5px" data-barspacing="5px"
													  data-fillcolor="false" data-linecolor="#fff" data-spotradius="3" data-linewidth="3"
													  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#fff"
													  data-highlightspotcolor="#fff" data-highlightlinecolor="#fff"
													  data-composite="7, 6, 5, 7, 9, 10, 8, 7, 6, 4, 7, 8, 8,4,1,2,4,6,2,4,8,10">
													8,4,1,2,4,6,2,4,4,8,10,7, 7, 6, 5, 7, 9, 10, 8, 7, 6, 6
												</span>
											</div>
										</div>
									</div>
									<div className="databox-bottom bg-white no-padding">
										<div className="databox-row row-2 padding-10">
											<span className="databox-text sonic-silver no-margin"><i className="glyphicon glyphicon-time gray"></i>Today, 4:15 PM</span>
										</div>
										<div className="databox-row row-4 padding-10">
											<div className="col-lg-6 bg-whitesmoke text-align-center">
												<span className="databox-number gray">16.8 M</span>
											</div>
											<div className="col-lg-6 bg-whitesmoke text-align-center bordered-left-3 bordered-white">
												<span className="databox-number gray">12 M</span>
											</div>
										</div>
										<div className="databox-row row-2">
											<div className="col-lg-6">
												<span className="databox-text sonic-silver no-margin"><i className="fa fa-caret-down orange"></i>Monthly</span>
											</div>
											<div className="col-lg-6">
												<span className="databox-text sonic-silver no-margin"><i className="fa fa-caret-up palegreen"></i>Yearly</span>
											</div>
										</div>
										<div className="databox-row row-4">
											<div className="col-lg-6 text-align-center">
												<div className="databox-sparkline">
													<span data-sparkline="bar" data-height="35px" data-width="100%"
														  data-barwidth="5px" data-barspacing="3px" data-stackedbarcolor='["#a0d468", "#ffce55"]'>
														2:2,2:3,3:2,1:3,4:2,2:2,3:2,1:3,3:2
													</span>
												</div>
											</div>
											<div className="col-lg-6 padding-5 text-align-center">
												<div className="databox-sparkline">
													<span data-sparkline="line" data-height="35px" data-width="100%" data-fillcolor="false" data-linecolor="#bfe19a"
														  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
														  data-highlightspotcolor="#fb6e52 " data-highlightlinecolor="#fb6e52 "
														  data-linewidth="2" data-spotradius="3">
														2,6,7,9,8,5,3,4,4,3,6,7
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-6 col-sm-6 col-xs-12">
								<div className="databox databox-xxlg radius-bordered databox-shadowed databox-vertical databox-graded">
									<div className="databox-top bordered-bottom-2 bordered-orange bg-ivory">
										<div className="col-lg-8 col-sm-8 col-xs-8 text-align-left">
											<span className="databox-text carbon">DATA TRANSFER STATS</span>
											<span className="databox-text carbon no-margin">Last Week</span>
										</div>
										<div className="col-lg-4 col-sm-4 col-xs-4 text-align-right">
											<div className="databox-stat bg-palegreen radius-bordered">
												<div className="stat-text">58%</div>
												<i className="stat-icon fa fa-arrow-up"></i>
											</div>
										</div>
									</div>
									<div className="databox-bottom">
										<div id="bar-chart" className="chart"></div>
									</div>
								</div>
							</div>
							<div className="col-lg-3 col-sm-6 col-xs-12">
								<div className="databox databox-xxlg databox-halved radius-bordered databox-shadowed databox-graded databox-vertical">
									<div className="databox-top bg-pink padding-30">
										<div className="databox-stat stat-left radius-bordered">
											<div className="stat-text white">PAGE VIEWS</div>
										</div>
										<div className="databox-stat white font-120">
											<i className="stat-icon fa fa-caret-down icon-xlg"></i>
										</div>
										<div className="databox-sparkline">
											<span data-sparkline="line" data-height="90px" data-width="100%" data-fillcolor="false" data-linecolor="#fff"
												  data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
												  data-highlightspotcolor="#f5f5f5 " data-highlightlinecolor="#f5f5f5"
												  data-linewidth="3" data-spotradius="0">
												1,3,2,5,4,0,5,7,6,5
											</span>
										</div>
									</div>
									<div className="databox-bottom padding-20">
										<div className="databox-row row-6">
											<div className="databox-cell cell-4">
												<span className="databox-number pink no-margin">4,129</span>
												<span className="databox-text darkgray no-margin">Profile</span>
											</div>
											<div className="databox-cell cell-8 padding-10">
												<div className="databox-sparkline">
													<span data-sparkline="bar" data-height="20px" data-width="100%" data-barcolor="#ccc" data-negbarcolor="#ccc" data-zerocolor="#ccc"
														  data-barwidth="5px" data-barspacing="2px">
														2,4,5,6,3,2,0,4,2,4,3,2,6,3,2
													</span>
												</div>
											</div>
										</div>
										<div className="databox-row row-6">
											<div className="databox-cell cell-4">
												<span className="databox-number pink no-margin">2,703</span>
												<span className="databox-text darkgray no-margin">About</span>
											</div>
											<div className="databox-cell cell-8 padding-10">
												<div className="databox-sparkline">
													<span data-sparkline="bar" data-height="20px" data-width="100%" data-barcolor="#ccc" data-negbarcolor="#ccc" data-zerocolor="#ccc"
														  data-barwidth="5px" data-barspacing="2px">
														4,2,4,3,2,6,3,2,2,4,5,6,3,2,0
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<h6 className="row-title before-sky">Largest Vertical Databoxes</h6>
						<div className="row">
							<div className="col-lg-8 col-sm-12 col-xs-12">
								<div className="databox databox-vertical databox-xxxlg radius-bordered databox-shadowed">
									<div className="databox-top bg-white bordered-bottom-1 bordered-platinum text-align-left padding-10">
										<div className="databox-text darkgray">CONSUMPTION</div>
									</div>
									<div className="databox-bottom bg-white no-padding ">
										<div className="databox-row row-3 block-center bg-ivory">
											<div className="databox-cell cell-4 padding-10">
												<div className="databox-piechart">
													<div data-toggle="easypiechart" className="easyPieChart pull-right" style={{margin:'0 auto'}}
														 data-barcolor="#5db2ff" data-linecap="butt" data-percent="60" data-animate="500"
														 data-linewidth="5" data-size="100" data-trackcolor="#eeeeee">
														<span className="white font-180"><i className="glyphicon glyphicon-map-marker blue"></i></span>
													</div>
												</div>
											</div>
											<div className="databox-cell cell-4 padding-10">
												<div className="databox-piechart">
													<div data-toggle="easypiechart" className="easyPieChart block-center" style={{margin:'0 auto'}}
														 data-barcolor="#e75b8d" data-linecap="butt" data-percent="70" data-animate="500"
														 data-linewidth="5" data-size="100" data-trackcolor="#eeeeee">
														<span className="white font-150"><i className="fa fa-camera pink"></i></span>
													</div>
												</div>
											</div>
											<div className="databox-cell cell-4 padding-10">
												<div className="databox-piechart">
													<div data-toggle="easypiechart" className="easyPieChart pull-left" style={{margin:'0 auto'}}
														 data-barcolor="#8cc474" data-linecap="butt" data-percent="60" data-animate="500"
														 data-linewidth="5" data-size="100" data-trackcolor="#eeeeee">
														<span className="white font-200"><i className="fa fa-bolt green"></i></span>
													</div>
												</div>
											</div>
										</div>
										<div className="databox-row row-1 bg-ivory bordered-bottom-1 bordered-lightgray" style={{borderBottomStyle:'dashed'}}>
											<div className="databox-cell cell-4 padding-right-20">
												<span className="databox-text darkcarbon pull-right no-margin"><i className="fa fa-arrow-up green"></i></span>
												<span className="databox-number carbon pull-right">909</span>
												<span className="databox-number gray pull-right"> $</span>
											</div>
											<div className="databox-cell cell-4">
												<div className="block-center" style={{width:'75px'}}>
													<span className="databox-text darkcarbon pull-right no-margin"><i className="fa fa-check blue"></i></span>
													<span className="databox-number carbon pull-right">643</span>
													<span className="databox-number gray pull-right"> $</span>
												</div>
											</div>
											<div className="databox-cell cell-4 padding-left-30">
												<span className="databox-number gray pull-left"> $</span>
												<span className="databox-number carbon pull-left">257</span>
												<span className="databox-text darkcarbon pull-left no-margin"><i className="fa fa-arrow-down orange"></i></span>
											</div>
										</div>
										<div className="databox-row row-2 no-padding bg-ivory">
											<div className="databox-cell cell-12 no-padding bordered-left-3 bordered-pink">
												<div className="horizontal-space"></div>
												<div className="databox-sparkline">
													<span data-sparkline="bar" data-height="62px" data-width="100%" data-barcolor="#cfd3de" data-negbarcolor="#cfd3de" data-zerocolor="#cfd3de"
														  data-barwidth="16px" data-barspacing="5px">
														2,4,5,6,3,2,0,4,2,4,3,2,6,4,5,1,4,5,6,9,1
													</span>
												</div>
											</div>
										</div>
										<div className="databox-row row-1 padding-10">
											<div className="databox-text darkgray no-margin">DISTRIBUTION</div>
										</div>
										<div className="databox-row row-3 no-padding bg-ivory bordered-bottom-1 bordered-platinum silver" style={{fontSize:'12px'}}>
											<table className="table table-condensed table-striped">
												<tbody>
													<tr>
														<td className="padding-left-10">
															iPad
														</td>
														<td>
															1208
														</td>
														<td>
															874,993
														</td>
													</tr>
													<tr>
														<td className="padding-left-10">
															iPhone
														</td>
														<td>
															7864
														</td>
														<td>
															761,083
														</td>
													</tr>
													<tr>
														<td className="padding-left-10">
															iPod
														</td>
														<td>
															903
														</td>
														<td>
															874,032
														</td>
													</tr>
													<tr>
														<td className="padding-left-10">
															iMac
														</td>
														<td>
															987
														</td>
														<td>
															165,973
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div className="databox-row row-2 padding-20 bg-whitesmoke">
											<a href="javascript:void(0);" className="btn btn-default pull-right">Save Report</a>
										</div>
									</div>
								</div>
							</div>
							<div className="col-lg-4 col-sm-6 col-xs-12">
								<div className="databox databox-vertical databox-xxxlg radius-bordered databox-shadowed">
									<div className="databox-top bg-orange text-align-left padding-left-30">
										<span className="databox-header"><i className="glyphicon glyphicon-map-marker"></i> NEW YORK CITY</span>
									</div>
									<div className="databox-bottom no-padding bg-sky">
										<div className="databox-row row-4 bg-yellow padding-30 text-align-left">
											<span className="databox-text padding-bottom-5" style={{fontSize:'20px'}}>FRI 29/09</span>
											<span className="databox-number" style={{fontSize:'44px'}}>14° <i className="wi wi-day-cloudy"></i></span>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">SAT</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">18°  <i className="wi wi-day-cloudy"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">SUN</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">25°  <i className="wi wi-cloudy-gusts"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">MON</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">22°  <i className="wi wi-windy"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">TUE</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">19°  <i className="wi wi-day-showers"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">WED</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">16°  <i className="wi wi-day-fog"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">THU</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">14°  <i className="wi wi-day-lightning"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left bordered-bottom bordered-whitesmoke">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">FRI</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">11°  <i className="wi wi-day-rain-mix"></i></span>
											</div>
										</div>
										<div className="databox-row row-1 padding-5 padding-left-30 text-align-left">
											<div className="databox-cell cell-8">
												<span className="databox-title no-margin">SAT</span>
											</div>
											<div className="databox-cell cell-4">
												<span className="databox-number">29°  <i className="wi wi-day-hail"></i></span>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
                    </div>
                </div>
			);
		}
	});
	
	var PageContent = React.createClass({
		fullScreenClick: function(e) {
			var element = document.documentElement;
			if (!$('body').hasClass("full-screen")) {
				$('body').addClass("full-screen");
				$('#fullscreen-toggler').addClass("active");
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.webkitRequestFullscreen) {
						element.webkitRequestFullscreen();
					} else if (element.msRequestFullscreen) {
						element.msRequestFullscreen();
					}
			} else {
				$('body').removeClass("full-screen");
				$('#fullscreen-toggler').removeClass("active");
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen();
				}
			}
		},
		sideBarClick: function(e) {
			$("#sidebar").toggleClass("hide");
			$(".sidebar-toggler").toggleClass("active");
			return false;
		},
		render: function() {
			return (
				<div className="page-content">

					<div className="page-breadcrumbs">
						<ul className="breadcrumb">
							<li>
								<i className="fa fa-home"></i>
								<a href="#">Home</a>
							</li>
							<li className="active">Databoxes</li>
						</ul>
					</div>

					<div className="page-header position-relative">
						<div className="header-title">
							<h1>
								DataBoxes
								<small>
									<i className="fa fa-angle-right"></i>
									beyond containers
								</small>
							</h1>
						</div>

						<div className="header-buttons">
							<a className="sidebar-toggler" href="#" onClick={this.sideBarClick}>
								<i className="fa fa-arrows-h"></i>
							</a>
							<a className="refresh" id="refresh-toggler" href="">
								<i className="glyphicon glyphicon-refresh"></i>
							</a>
							<a className="fullscreen" id="fullscreen-toggler" href="#" onClick={this.fullScreenClick}>
								<i className="glyphicon glyphicon-fullscreen"></i>
							</a>
						</div>

					</div>

					<div className="page-body">
						<FirstRow />
					</div>
				</div>
			);
		}
	});
	
	var WholePage = React.createClass({
		render: function() {
			return (
				<div>
					<div className="loading-container">
						<div className="loader"></div>
					</div>
					<Navbar />
					<div className="main-container container-fluid">
						<div className="page-container">
							<PageSidebar />
							<ChatBar />
							<PageContent />
						</div>
					</div>
				</div>
			);
		}
	});
	
	
	ReactDOM.render(
		<WholePage />,
		document.getElementById('content')
		);
	</script>

    <!--Basic Scripts-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

    <!--Beyond Scripts-->
    <script src="assets/js/beyond.min.js"></script>

    <!--Page Related Scripts-->
    <script src="assets/js/charts/sparkline/jquery.sparkline.js"></script>
    <script src="assets/js/charts/sparkline/sparkline-init.js"></script>

    <script src="assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
    <script src="assets/js/charts/easypiechart/easypiechart-init.js"></script>

    <script src="assets/js/charts/morris/raphael-2.0.2.min.js"></script>
    <script src="assets/js/charts/morris/morris.js"></script>
    <script src="assets/js/charts/morris/morris-init.js"></script>

    <script src="assets/js/charts/flot/jquery.flot.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.orderBars.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.tooltip.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.resize.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.selection.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.crosshair.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.stack.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.time.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.pie.js"></script>

    <script src="assets/js/charts/chartjs/Chart.js"></script>
    <script>
        
    </script>

    <!--Google Analytics::Demo Only-->
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'http://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-60412744-1', 'auto');
        ga('send', 'pageview');

    </script>
</body>
<!--  /Body -->
</html>
